<template>
  <el-dialog
    v-model="visible"
    :width="1000"
    :close-on-click-modal="false"
    title="配置客服"
  >
    <div class="search-bar">
      <el-form
        :inline="true"
        :model="searchForm"
        @submit.prevent
        @keyup.enter="getDataList(page)"
      >
        <div class="input-row">
          <el-form-item
            label="用户名:"
            :label-width="'90px'"
          >
            <el-input
              v-model="searchForm.username"
              placeholder="用户名"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="用户昵称:"
            :label-width="'90px'"
          >
            <el-input
              v-model="searchForm.nickName"
              placeholder="用户昵称"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <div
              class="default-btn primary-btn"
              @click="onSearch(true)"
            >
              {{ $t("order.query") }}
            </div>

            <div
              class="default-btn"
              @click="clear()"
            >
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="main">
      <!-- 表格 -->
      <div
        class="table-con prod-table"
        style="margin-bottom: 10px;"
      >
        <el-table
          ref="prodListTableRef"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            align="left"
            prop="username"
            label="用户名"
          >
            <template #default="scope">
              <el-radio
                :model-value="selectUser?.userId"
                :label="scope.row.userId"
                @click="onChangeSel(scope.row)"
              >
                {{ scope.row.username }}
              </el-radio>
            </template>
          </el-table-column>

          <el-table-column
            align="left"
            prop="nickName"
            label="用户昵称"
          />

          <el-table-column
            align="left"
            prop="email"
            label="邮箱"
          />

          <el-table-column
            align="left"
            prop="mobile"
            label="手机号"
          />
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination
        v-if="dataList.length"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="onPageSizeChange"
        @current-change="onPageChange"
      />
    </div>

    <template
      #footer
    >
      <div>
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t("coupon.cancel") }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onSubmit"
        >
          {{ $t("coupon.confirm") }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'

const emit = defineEmits(['refresh'])
const curMerchant = ref({})
const selectUser = ref(null)
const visible = ref(false)
const searchForm = ref({})
const dataList = ref([])
const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const getDataList = (pageParam) => {
  const params = {
    ...searchForm.value,
    roleId: 1,
    current: pageParam == null ? page.currentPage : pageParam.currentPage,
    size: pageParam == null ? page.pageSize : pageParam.pageSize
  }
  http({
    url: http.adornUrl('/sys/user/page'),
    method: 'get',
    params: http.adornParams(params)
  }).then(({ data }) => {
    dataList.value = data.records || []
    page.total = data.total
    // 末尾页数据为空重新请求
    if (!dataList.value.length && dataList.currentPage > 1) {
      dataList.currentPage = 1
      getDataList()
    }
  })
}

const onChangeSel = (v) => {
  selectUser.value = v
}

const onSubmit = () => {
  // API
  if (!selectUser.value) {
    ElMessage.warning('请选择客服')
    return
  }
  http({
    url: http.adornUrl('/shop/merchantUser'),
    method: 'post',
    data: http.adornData({
      merchantId: curMerchant.value.shopCompanyId,
      userMobile: selectUser.value.mobile,
      isAdmin: 3,
      auditStatus: 1,
      auditResult: 1
    })
  }).then(() => {
    ElMessage.success('配置成功')
    visible.value = false
    emit('refresh')
  })
}

const onSearch = () => {
  page.currentPage = 1
  getDataList()
}

const clear = () => {
  searchForm.value = {}
}

const onPageSizeChange = (val) => {
  page.pageSize = val
  getDataList()
}
const onPageChange = (val) => {
  page.currentPage = val
  getDataList()
}

const init = (row) => {
  visible.value = true
  selectUser.value = null
  curMerchant.value = row
  getDataList(page)
}

defineExpose({
  init
})
</script>
